<!-- 没有下拉级联的筛选 -->
<template lang="pug">
g-h
  div.blank(@click="$emit('close')" :style="blankStyle")
  g-h.filter-button(:style="filterStyle")
    div.reset(@click="reset") 重置
    div.confirm(@click="confirm") 确认
  div.filter(:style="filterStyle")
    g-v.filter-block(v-for="(block, i) in localFilterData" :key="i")
      div.filter-title {{ block.title }}

      g-h(v-if="block.tag === 'enum' || block.tag === 'comma-enum'" :wrap="true")
        g-h.filter-item(
            j-c="space-around"
            a-i="center"
            v-for="(item, j) in block.list"
            :key="j"
            :class="{'filter-item-selected': item.selected}"
            @click.native="item.selected = !item.selected"
            )
          icon-check(v-show="item.selected" width="16" strokeWidth="10")
          div {{ item.title }}

      g-h(v-if="block.tag === 'input'" a-i="center")
        span {{ block.kTitle }}
        input.input-item(v-model="block.vTitle")
      
      div(v-if="block.tag === 'date'")
        g-h(j-c="center" a-i="center")
          div.date(
              @click="chooseStartDate(block.name)"
              :class="{'date-is-empty': startDateMap[block.name].date === null}"
              ) {{ startDateMap[block.name].text }}
          div.line —
          div.date(
              @click="chooseEndDate(block.name)"
              :class="{'date-is-empty': endDateMap[block.name].date === null}"
              ) {{ endDateMap[block.name].text }}
      
        mt-datetime-picker(
            :ref="startDateMap[block.name].picker"
            type="date"
            v-model="startDateMap[block.name].pickerDate"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="(value) => confirmStartDate(value, block.name)"
            )
        mt-datetime-picker(
            :ref="endDateMap[block.name].picker"
            type="date"
            v-model="endDateMap[block.name].pickerDate"
            year-format="{value} 年"
            month-format="{value} 月"
            date-format="{value} 日"
            @confirm="(value) => confirmEndDate(value, block.name)"
            )
</template>

<script>
/*
  事件
    close     关闭筛选页面
    reset     点击重置按钮
    confirm   点击确定按钮
*/

export default {
  name: "ListFilter",
  props: {
    // 是否显示筛选页面
    showFilter: {
      type: Boolean,
      default: false,
    },
    // 开始日期
    startPlaceHolder: {
      type: String,
      default: "开始日期",
    },
    // 结束日期
    endPlaceHolder: {
      type: String,
      default: "结束日期",
    },

    /* 
      筛选配置
      示例:
      [
        {
          name: "status",
          title: "状态",
          tag: "enum",
          list: [
            {
              name: "completed",
              title: "已完成",
              selected: true,
            },
          ],
        },
        {
          name: "createDate",
          title: "创建日期",
          tag: "date",
        },
        {
          name: "name",
          kTitle: "商品名",
          v?: "ok",
          vTitle?: "ok",
          tag: "input",
        },
      ]
    */
    filterData: {
      type: Array,
      default: () => [],
    },
  },

  data() {
    let startDateMap = {}
    let endDateMap = {}

    for (let block of this.filterData) {
      if (block.tag === "date") {
        startDateMap[block.name] = {
          date: null,
          text: this.startPlaceHolder,
          picker: `startDatePicker${block.name}`,
          pickerDate: new Date(), // the date shown in the picker
        }
        endDateMap[block.name] = {
          date: null,
          text: this.endPlaceHolder,
          picker: `endDatePicker${block.name}`,
          pickerDate: new Date(),
        }
      }
    }


    return {
      localFilterData: this.filterData,
      startDateMap,
      endDateMap,
    }
  },
  computed: {
    blankStyle() {
      let a = {}
      if (this.showFilter) {
        a = {
          background: "rgba(0,0,0,0.5)", // NOTE: #00000080 does not work in android
          visibility: "visible",
        }
      } else {
        a = {
          background: "rgba(0,0,0,0)",
          visibility: "hidden",
        }
      }
      return a
    },
    filterStyle() {
      let a = {}
      if (this.showFilter){
        a = {
          transform: "translateX(0%)",
          visibility: "visible",
        }
      } else {
        a = {
          transform: "translateX(100%)",
          visibility: "hidden",
        }
      }
      return a
    },
  },
  methods: {
    reset() {
      for (let block of this.localFilterData) {
        switch (block.tag) {
          case "enum":
          case "comma-enum":
            for (let item of block.list) {
              if (item.selected) {
                item.selected = false
              }
            }
            break
          case "date":
            this.startDateMap[block.name].text = this.startPlaceHolder
            this.startDateMap[block.name].date = null
            this.startDateMap[block.name].pickerDate = new Date()

            this.endDateMap[block.name].text = this.endPlaceHolder
            this.endDateMap[block.name].date = null
            this.endDateMap[block.name].pickerDate = new Date()
            break
          case "input":
            block.vTitle = ""
            break
        }
      }
      this.$emit("reset")
    },
    confirm() {
      let selected = []
      for (let block of this.localFilterData) {
        let br = []
        switch (block.tag) {
          case "enum":
          case "comma-enum":
            for (let item of block.list) {
              if (item.selected) {
                br.push(item.name)
              }
            }
            break
          case "date":
            let start = this.startDateMap[block.name].date
            let end = this.endDateMap[block.name].date
            if (start != null || end != null) {
              br.push(start)
              br.push(end)
            }
            break
          case "input":
            if (block.vTitle) {
              br.push(block.vTitle)
            }
            break
        }

        if (br.length > 0) {
          selected.push({
            key: block.name,
            tag: block.tag,
            value: br,
          })
        }
      }

      this.$emit("confirm", selected)
      this.$emit("close")
    },

    chooseStartDate(name) {
      this.$refs[`startDatePicker${name}`][0].open()
    },
    confirmStartDate(value, name) {
      this.startDateMap[name].date = value
      this.startDateMap[name].text = value.toLocaleDateString("zh-CN", value)
    },

    chooseEndDate(name) {
      this.$refs[`endDatePicker${name}`][0].open()
    },
    confirmEndDate(value, name) {
      this.endDateMap[name].date = value
      this.endDateMap[name].text = value.toLocaleDateString("zh-CN", value)
    },
  },
}
</script>

<style lang="stylus" scoped>

.blank
.filter
  z-index: 98
  position: fixed
  top: 0
  bottom: 0
  transition: all 300ms

.filter-button
  z-index: 99 
  position: fixed
  bottom: 0
  right: 0
  width: 80%
  transition: all 300ms

// 左侧的空白
.blank
  width: 100%
  touch-action: none

// 右侧的筛选
.filter
  right: 0
  width: 80%
  padding: 2rem 1rem
  box-shadow: 0 0 10px grey400
  background: grey100
  overflow-no-scrollbar()

.reset
.confirm
  width: 50%
  font-size: 20px
  padding: 0.7rem
  text-align: center

// 重置按钮
.reset
  background: grey300
  color: grey700
  &:active
    background: grey500
    color: grey200

// 确认按钮
.confirm
  background: red500
  color: white
  &:active
    background: grey300
    color: red500

.filter-block
  margin-bottom: 1rem

.filter-title
  font-size: 18px
  margin-bottom: 0.5em

.filter-item
  font-size: 14px
  margin: 0.3rem 0.3rem
  width: 29%
  height: 2.5em
  padding: 0.4rem
  border-radius: 5px
  background: grey300
  text-ellipsis()

  &-selected
    color: red500
    background: grey100
    border: 1px solid red500

// date
.date
  font-size: 14px
  text-align: center
  border-radius: 5px
  background: grey100
  margin: 0 0.3rem
  padding: 0.2rem
  width: 40%
  border: 1px solid red500
  color: red500

.date-is-empty
  background: grey300
  color: grey500
  border-color: transparent

.line
  margin: 0 0.5rem

.input-item
  position: absolute
  right: 0.5rem
  width: 60%
  border: 1px solid grey500
  border-radius: 0.3rem
  padding: 0.3rem

</style>
